import React from 'react';
import './vertical_1.css';
import {isEqual} from "lodash";

class Vertical_1 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            eid:props.eid,
            topArrowWidth:'',
            maxWidth:'',
        }
        this.rdCss=this.rdCss.bind(this);
        this.updateData=this.updateData.bind(this);
        this.onClickOutSideHandler=this.onClickOutSideHandler.bind(this);
    }

    rdCss() {
        var obj = arguments[0];
        var options = arguments[1];
        if (!!obj === false || typeof options === 'undefined') {
            return null;
        }
        if (typeof options === 'string') {
            let res = document.defaultView.getComputedStyle(obj, null)[options];
            res = Number(res.replace('px', ''));
            return res;
        }
        if (typeof options === 'object') {
            for (var i in options) {
                obj.style[i] = options[i];
            }
        }
    }


    componentDidMount(){
        this.props.onRef(this)
        this.updateData();
        window.addEventListener('click',this.onClickOutSideHandler,true);

    }
    componentWillUnmount(){
        window.removeEventListener('click',this.onClickOutSideHandler,true);
    }

    componentDidUpdate(){
        const {eid}=this.state

        let arrowDiv=".timeline-vertical-1-"+eid+" #num_0";
        var width=$(arrowDiv).width();
        width=parseInt(width)+12
        if(parseInt(width)>0){

            let arrowDivClass=".arrow_0_"+eid;
            document.styleSheets[0].addRule(arrowDivClass,'width:'+(parseInt(width))+'px ');
            document.styleSheets[0].addRule(arrowDivClass,'border-left-width:'+(parseInt(width))/2+'px !important');
            document.styleSheets[0].addRule(arrowDivClass,'border-right-width:'+(parseInt(width))/2+'px !important');
        }
    }
    componentWillReceiveProps(){
        this.updateData();
    }

    onClickOutSideHandler(e){
        var targetDiv=e.target.className || e.srcElement.className;
        if(targetDiv && targetDiv=='e9header-font-setting-item'){
            setTimeout(this.updateData,0);
        }
    }

    updateData(){
        const {datainfo} =this.props;
        const {eid}=this.state;

        let arrowDiv=".timeline-vertical-1-"+eid+" #num_0";
        var width=$(arrowDiv).width();
        width=parseInt(width)+12
        this.setState({topArrowWidth:width});

        let maxWidth=0;
        if(datainfo!=null&&datainfo.length>0) {
            datainfo.map((item, i) => {
                let timelineDivClass=".timeline-vertical-1-"+eid+" #num_"+i;
                let timelineDiv=document.querySelector(timelineDivClass);
                let timelineWidth=parseInt(Number(this.rdCss(timelineDiv, 'width')))+12;
                let itemWidth = timelineWidth;
                itemWidth > maxWidth ? maxWidth = itemWidth : '';
            })
        }
        this.setState({maxWidth:maxWidth});

        var width=$(arrowDiv).width();
        width=parseInt(width)+12
        if(parseInt(width)>0){

            let arrowDivClass=".arrow_0_"+eid;
            document.styleSheets[0].addRule(arrowDivClass,'width:'+(parseInt(width))+'px ');
            document.styleSheets[0].addRule(arrowDivClass,'border-left-width:'+(parseInt(width))/2+'px !important');
            document.styleSheets[0].addRule(arrowDivClass,'border-right-width:'+(parseInt(width))/2+'px !important');
        }

    }


    render(){
        const {datainfo} =this.props;
        const {eid,topArrowWidth}=this.state
        let {maxWidth}=this.state;

        let arrowDiv=".timeline-vertical-1-"+eid+" #num_0";
        var domTest=document.querySelector(arrowDiv);
        var width=Number(this.rdCss(domTest, 'width'));




        if(parseInt(width)>0){
            let arrowDivClass=".arrow_0_"+eid;
            document.styleSheets[0].addRule(arrowDivClass,'width:'+(parseInt(width))+'px');
            document.styleSheets[0].addRule(arrowDivClass,'border-left-width:'+(parseInt(width))/2+'px !important');
            document.styleSheets[0].addRule(arrowDivClass,'border-right-width:'+(parseInt(width))/2+'px !important');
           // $(".timeline-vertical-1-"+eid+" #arrow_0").css("width",width+'px').css("border-left-width",(parseInt(width))/2+'px').css("border-right-width",(parseInt(width))/2+'px');
        }

        if(datainfo!=null&&datainfo.length>0) {
            datainfo.map((item, i) => {
                let timelineDivClass=".timeline-vertical-1-"+eid+" #num_"+i;
                let timelineDiv=document.querySelector(timelineDivClass);
                let timelineWidth=parseInt(Number(this.rdCss(timelineDiv, 'width')))+12;
                let itemWidth = timelineWidth;
                itemWidth > maxWidth ? maxWidth = itemWidth : '';
            })
        }

        maxWidth<70?maxWidth=70:'';
        maxWidth>195?maxWidth=195:''
        document.styleSheets[0].addRule(' #tabcontant_'+eid+' .timeline-vertical-1::before','left:'+(parseInt(maxWidth)+20)+'px');
        return<div>
                {datainfo.length>0?
                <div id="timeline-vertical-1" className={"container-vertical-1 timeline-vertical-1 timeline-vertical-1-"+eid } >
                {
                    datainfo.map((item,i)=>{

                    let timelineDivClass="timeline-vertical-1 #num_"+i;
                    let timelineDiv=document.querySelector(timelineDivClass);
                    let timelineWidth=parseInt(Number(this.rdCss(timelineDiv, 'width')))+12;

                        if(parseInt(timelineWidth)>195){
                            timelineWidth=195
                        }
                        let arrowStyle={}
                        let arrowBorderWidth
                        let div2style={maxWidth:'195px',height:'20px',display:'inline-block',fontSize:'12px',position:'absolute',background:'#B5B5B5',lineHeight:'20px',color:'#ffffff',textAlign:'center',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',paddingLeft:'6px',paddingRight:'6px',position:'relative',float:'right'}
                        let div2styleNone={maxWidth:'195px',height:'20px',display:'none',fontSize:'12px',position:'absolute',background:'#B5B5B5',lineHeight:'20px',color:'#ffffff',textAlign:'center',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',paddingLeft:'6px',paddingRight:'6px',position:'relative',float:'right'}
                        if(i==0){

                            timelineWidth=parseInt(topArrowWidth);
                            if(parseInt(timelineWidth)>195){
                                timelineWidth=195
                            }
                             arrowBorderWidth=parseInt(topArrowWidth)/2
                             arrowStyle={position:'absolute',float:'right',width:'100% '}
                             div2style={maxWidth:'195px',height:'20px',display:'inline-block',fontSize:'12px',position:'absolute',background:'#B5B5B5',lineHeight:'20px',color:'#ffffff',textAlign:'center',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',paddingLeft:'6px',paddingRight:'6px',position:'relative',float:'right',marginTop:'10px'}

                        }
                    let div3Style={left:parseInt(maxWidth)-1,width:'1px',top:'-10px'}
                    let div3Style1={left:parseInt(maxWidth)-parseInt(timelineWidth),width:timelineWidth}
                    let contentdata=item.content;
                    let contentArr=contentdata.split(/\n/g);

                    return i==0?
                         <div class="timeline-content-vertical-1" >
                            <div class="timeline-img-vertical-1" style={{left:parseInt(maxWidth)+30}}></div>
                            <div class="timeline-dateinfo-vertical-1" style={div3Style}>
                                <div style={{float:'right',position:'relative'}}>
                                    <div  id={'arrow_'+i} className={'arrow_'+i+"_"+eid} style={arrowStyle}></div>
                                    <div id={'num_'+i} className={"wea-f12"} style={div2style} title={item.timeline}>{item.timeline}</div>
                                </div>
                            </div>
                            <div class="timeline-content" style={{left:parseInt(maxWidth)-55,width:'calc(100% - '+(maxWidth+30)+'px)'}}>
                                <div className="content-vertical-1" >
                                    <div className={"wea-f12"}>
                                        {
                                            contentArr.map((item,i)=>{
                                                if(item==""){
                                                    return <span style={{display:'block',height:'20px'}}></span>
                                                }
                                                return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                            })
                                        }
                                    </div>
                                </div>
                            </div>
                         </div>
                        : <div class="timeline-content-vertical-1">
                                <div class="timeline-img-vertical-1" style={{left:parseInt(maxWidth)+30}}></div>
                                <div class="timeline-dateinfo-vertical-1" style={div3Style1}>
                                    <div  id={'arrow_'+i}> </div>
                                    <div id={'num_'+i}  className={"wea-f12"} style={div2style} title={item.timeline}>{item.timeline}</div>
                                </div>
                                <div class="timeline-content" style={{left:parseInt(maxWidth)-55,width:'calc(100% - '+parseInt(maxWidth+30)+'px)'}}>
                                    <div className="content-vertical-1" >
                                        <div className={"wea-f12"}>
                                            {
                                                contentArr.map((item,i)=>{
                                                    if(item==""){
                                                        return <span style={{display:'block',height:'20px'}}></span>
                                                    }
                                                    return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                                })
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        })
                }
                </div>
                :
                <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
                }
            </div>
    }
}

export default Vertical_1;